<template>
  <div class="container" ref="mainCon">
    <!-- 搜索 -->
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" ref="searchConditions" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item label="上传状态" class="row-padding-bottom">
              <el-select
                v-model="filterField.uploadStatus"
                filterable
                placeholder="请选择上传状态"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in dataStatusArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="班组名称" class="row-padding-bottom">
              <el-input
                placeholder="请输入班组名称"
                clearable
                v-model="filterField.groupName"
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="参建单位名称" class="row-padding-bottom">
                <el-input
                  placeholder="请输入参建单位名称"
                  clearable
                  v-model="filterField.projectCompanyName"
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item>
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px">
          <el-button
            class="commonBut saveBtn funComBut"
            @click="synchronize"
            :loading="synchronizeLoading"
          >
            <span class="opetareText">同步</span>
          </el-button>
          <el-button
            class="commonBut saveBtn funComBut"
            @click="refreshNew()"
            :loading="asynchronousLoading"
          >
            <span class="opetareText">异步刷新</span>
          </el-button>
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="参建单位名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectCompanyName"
                :columnName="'projectCompanyName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="groupName"
            label="班组名称"
            :formatter="formatTd"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="entryTime"
            label="进场日期"
            :formatter="formatTd"
            min-width="180"
          ></el-table-column>
          <el-table-column
            prop="uploadStatusDesc"
            label="上传状态"
            :formatter="formatTd"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="updateStatusDesc"
            label="修改状态"
            :formatter="formatTd"
            min-width="160"
          ></el-table-column>
          <el-table-column label="操作" align="left" width="230" fixed="right">
            <template slot-scope="scope">
              <el-link type="primary" @click="seeDetail(scope.row)"
                >查看</el-link
              >
              <el-link
                type="primary"
                @click="uploadNew(scope.row, 'upload')"
                v-if="
                  scope.row.uploadStatus == 'PENDING_UPLOAD' ||
                  scope.row.uploadStatus == 'UPLOAD_FAIL' ||
                  scope.row.uploadStatus == 'RESOLVE_FAIL'
                "
                :disabled="uploadDisabled"
                >上传</el-link
              >
              <el-link
                type="primary"
                @click="refreshNew(scope.row)"
                v-if="
                  scope.row.uploadStatus == 'PENDING_RESOLVE' ||
                  scope.row.updateStatus == 'PENDING_RESOLVE' ||
                  scope.row.updateStatus == 'RELATE_PENDING_RESOLVE' ||
                  scope.row.updateStatus == 'EXITING'
                "
                :disabled="refreshDisabled"
                >刷新</el-link
              >
              <el-link
                type="primary"
                @click="uploadNew(scope.row, 'refresh')"
                v-if="
                  scope.row.uploadStatus == 'RESOLVE_SUCCESS' &&
                  (scope.row.updateStatus == 'PENDING_UPDATE' ||
                    scope.row.updateStatus == 'UPDATE_FAIL' ||
                    scope.row.updateStatus == 'RESOLVE_FAIL' ||
                    scope.row.updateStatus == 'RELATE_PENDING_UPDATE' ||
                    scope.row.updateStatus == 'RELATE_UPDATE_FAIL' ||
                    scope.row.updateStatus == 'RELATE_RESOLVE_FAIL' ||
                    scope.row.updateStatus == 'PENDING_EXIT' ||
                    scope.row.updateStatus == 'EXIT_FAIL' ||
                    scope.row.updateStatus == 'RESOLVE_ENTRY')
                "
                :disabled="newDisabled"
                >更新</el-link
              >
              <el-link type="primary" @click="seeLog(scope.row)">日志</el-link>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- 分页 -->
        <Pagination
          ref="pagination"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
    <groupDetailDrawer
      v-if="showGroupDetai"
      @closeGroupDetail="closeGroupDetail"
      :id="id"
    ></groupDetailDrawer>
    <!-- 日志侧弹框 -->
    <log-detail v-if="showLog" @closeLog="closeLog" :id="id"></log-detail>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
import logDetail from './logDetail.vue'
import groupDetailDrawer from './groupDetailDrawer.vue'
export default {
  name: 'groupList',
  mixins: [scrollTable],
  components: {
    logDetail,
    groupDetailDrawer,
  },
  props: {
    projectId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      requestUrl: 'api-out/sz/group/list',
      //表格数据
      tableList: [],
      isShow: false, //列表加载
      loading: true,
      filterField: {
        projectId: this.projectId,
        groupName: '',
        projectCompanyName: '',
        uploadStatus: '',
      },
      pageSize: 20,
      pageNo: 1,
      dataStatusArr: [],
      showLog: false, //日志侧弹框
      id: '',
      synchronizeLoading: false, //同步loading
      asynchronousLoading: false,
      showGroupDetai: false,
      advanced: false,
      uploadDisabled: false,
      newDisabled: false,
      refreshDisabled: false,
    }
  },
  created() {
    this.getUploadStatus()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  mounted() {},
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    getUploadStatus() {
      this.axios({
        method: 'post',
        url: 'api-out/sz/upload/status',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.dataStatusArr = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    // 查看
    seeDetail(row) {
      this.showGroupDetai = true
      this.id = row.id
    },
    closeGroupDetail() {
      this.showGroupDetai = false
    },
    // 日志
    seeLog(row) {
      this.showLog = true
      this.id = row.id
    },
    closeLog() {
      this.showLog = false
    },
    uploadNew(row, type) {
      var url, data
      if (type == 'upload') {
        url = 'api-out/sz/group/sync'
        this.uploadDisabled = true
      } else {
        url = 'api-out/sz/group/updateSync'
        this.newDisabled = true
      }
      data = {
        projectId: row.projectId,
        projectCompanyId: row.projectCompanyId,
        groupId: row.groupId,
      }
      this.axios({
        method: 'post',
        url: url,
        data: data,
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: response.data.msg,
                type: 'success',
              })
              this.searchList()
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
            if (type == 'upload') {
              this.uploadDisabled = false
            } else {
              this.newDisabled = false
            }
          },
          (response) => {
            if (type == 'upload') {
              this.uploadDisabled = false
            } else {
              this.newDisabled = false
            }
          }
        )
        .catch((error) => {
          if (type == 'upload') {
            this.uploadDisabled = false
          } else {
            this.newDisabled = false
          }
        })
    },
    // 刷新
    refreshNew(row) {
      var data
      if (!row) {
        this.asynchronousLoading = true
        data = {}
      } else {
        this.refreshDisabled = true
        data = {
          projectId: row.projectId,
          projectCompanyId: row.projectCompanyId,
          groupId: row.groupId,
        }
      }
      this.axios({
        method: 'post',
        url: 'api-out/sz/group/webRefresh',
        data: data,
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: response.data.msg,
                type: 'success',
              })
              this.searchList()
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
            if (!row) {
              this.asynchronousLoading = false
            } else {
              this.refreshDisabled = false
            }
          },
          (response) => {}
        )
        .catch((error) => {
          if (!row) {
            this.asynchronousLoading = false
          } else {
            this.refreshDisabled = false
          }
        })
    },
    // 同步
    synchronize() {
      this.synchronizeLoading = true
      this.axios({
        method: 'post',
        url: 'api-out/sz/group/webInit',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: response.data.msg,
                type: 'success',
              })
              this.searchList()
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
            this.synchronizeLoading = false
          },
          (response) => {}
        )
        .catch((error) => {
          this.synchronizeLoading = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  top: 212px;
  // padding-top:0 !important;
}
// .searchInputWidth {
//     .el-form-item {
//         margin-bottom:0 !important;
//     }
//     .el-form {
//         margin-top: 24px;
//         text-align: right;
//     }
// }
@import '../../../static/css/filterArea.less';
</style>
